<template>
  <view class="flex flex-column bg_F5F5F5 pageHeight wh_750">
    <s-header-title ref="headerTitle" isDisplayBack title="更换背景" is-fixed
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight" zIndex="10"
    ></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <scroll-view :style="{
      height: `calc(100vh - ${page.headerHeight}px)`
    }" :scroll-y="true" class="w-full">
      <view class="flex flex-column align-center w-full">
        <view class="w-full flex flex-column align-center" v-for="(item,index) in page.backgroundList" :key="index">
          <view class="hW_25"></view>
          <view class="list flex justify-between align-center" :style="{
            background: '#FFFFFF'
          }">
            <view class="left flex">
              <image :src="item.image"></image>
              <view class="flex flex-column justify-center ml_15">
                <view class="title">
                  {{ item.name || '背景名称' }}
                  <image class="ml_15" :src="`${IMG_URL}/index/vipopen.png`" v-if="item.is_vip != 1"></image>
                </view>
                <view class="subtitle mt_14">
                  <!-- {{ item.is_vip != 1 ? '会员可用' : '免费使用' }} -->
                  {{ item.describe || '背景描述' }}
                </view>
              </view>
            </view>
            <view class="right flex align-center justify-center" @click.stop="useBackground(item)"
                  :style="item.image != page.options.background_url ?'color: #9F9F9F;background: #FFFFFF;border: 2rpx solid #9F9F9F;':'color: #FFFFFF;background: #FF4206;'">
              {{ item.image == page.options.background_url ? '当前使用' : '切换' }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 会员弹窗 -->
    <s-popup-vip :show="vipDisposition.isShow" @closePopup="closePopup">
      <template #default>
        <view class="memberPopup position-relative"
              v-if="!!vipDisposition.goodDetails && vipDisposition.goodDetails != {}">
          <image class="w-100 h-100" :src="`${nc_image_path}/nc_vip_banner.png`"></image>
          <view class="exchange flex align-center justify-between">
            <view class="flex align-end" v-if="!!vipDisposition.goodDetails.price">
              <text>￥</text>
              <text class="fs_60" style="line-height: 60rpx">{{ vipDisposition.goodDetails.price[0] }}</text>
            </view>
            <view @click.stop="exchangeImmediately">
              兑换
            </view>
          </view>
          <view class="chatDetail fs_26 fw_500" style="color: #FDD07F"
                @click.stop="sheep.$router.go('/pages/public/richtext',{id:4,title:'会员权益'})"
          >
            查看详情
          </view>
          <view class="button_vip flex flex-row align-center justify-center" @click.stop="openImmediately">
            立即开通
          </view>
        </view>
      </template>
    </s-popup-vip>
  </view>
</template>

<script setup>
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import { computed, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const page = reactive({
    headerHeight: 0,
    backgroundList: [],
    options: {},
  });
  const vipDisposition = reactive({
    isShow: false,
    goodDetails: {},
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const nc_image_path =  computed(() => sheep.$store('AI').nc_image_path);
  onLoad(async (options) => {
    const { data } = await sheep.$api.goods.ids({ ids: '10' });
    vipDisposition.goodDetails = data[0];
    page.options = options;
    page.options.background_url = uni.getStorageSync('backgroundBgCitang');
    await getBackgroundList();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function getBackgroundList() {
    const { data } = await sheep.$api.genealogy.getBackgroundList();
    page.backgroundList = data;
  }

  async function useBackground(item) {
    if (item.image == page.options.background_url) {
      return;
    }

    if (item.is_vip == 2) {
      if (!!userInfo.value.vip_end_time && new Date().getTime() / 1000 < userInfo.value.vip_end_time) {
        let {
          code,
          msg,
        } = await sheep.$api.genealogy.updateAncestralInfo({
          id: page.options.id,
          background_url: item.image,
        });
        if (code == 1) {
          uni.setStorageSync('changeBackground', item.image);
          uni.navigateBack();
        } else {
          sheep.$helper.toast(msg);
        }
      } else {
        vipDisposition.isShow = true;
      }
    } else {
      let {
        code,
        msg,
      } = await sheep.$api.genealogy.updateAncestralInfo({
        id: page.options.id,
        background_url: item.image,
      });
      if (code == 1) {
        uni.setStorageSync('changeBackground', item.image);
        uni.navigateBack();
      } else {
        sheep.$helper.toast(msg);
      }
    }
  }

  function exchangeImmediately() {
    sheep.$router.go('/pages/vip/memberCenter');
  }

  // 关闭会员弹窗
  function closePopup() {
    vipDisposition.isShow = false;
  }

  // 立即开通
  async function openImmediately() {
    let obj = {};
    let arr = [];
    arr.push({
      goods_id: vipDisposition.goodDetails.id,
      goods_num: 1,
      goods_sku_price_id: vipDisposition.goodDetails.id,
    });
    obj.goods_list = arr;
    obj.is_from = 1;
    obj.order_type = 'goods';
    const { code, data } = await sheep.$api.order.create(obj);
    uni.redirectTo({
      url: `/pages/pay/index?orderSN=${data.order_sn}&flag=1`,
    });
  }
</script>


<style scoped lang="scss">
  .list {
    width: 662rpx;
    height: 126rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 15rpx 20rpx;

    .left {
      image {
        width: 67rpx;
        height: 102rpx;
      }

      .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #0F0F0F;

        image {
          width: 76rpx;
          height: 24rpx;
        }
      }

      .subtitle {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 24rpx;
        color: #696969;
      }
    }

    .right {
      width: 115rpx;
      height: 44rpx;
      background: #FF4206;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .memberPopup {
    width: 750rpx;
    height: 789rpx;

    .exchange {
      width: 325rpx;
      position: absolute;
      right: 215rpx;
      top: 154rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 28rpx;
      color: #E94F09;
      padding: 0 0 5rpx 0;
    }
  }

  .button_vip {
    position: absolute;
    left: 50%;
    bottom: 110rpx;
    transform: translate(-50%, 0);
    width: 269rpx;
    height: 82rpx;
    background: url($uni-bg-url + '/nc_vip_button.png') no-repeat;
    background-size: 269rpx 82rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 41rpx;
    color: #FF4206;
  }
  .chatDetail {
    position: absolute;
    left: 50%;
    bottom: 270rpx;
    transform: translate(-50%, 0);
  }
</style>
